<template>
  <div>
    <h2><slot></slot></h2>

    <button @click="myIncreaseAge">Increase age</button>
    <button @click="mySetName('张智琦2')">Set name</button>
    <button @click="increaseAge">Increase age</button>
    <button @click="setName('张智琦2')">Set name</button>
    <button @click="increaseAge2">Increase age</button>
    <button @click="setName2('张智琦2')">Set name</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'ModuleMutations2',
  methods: {
    // mutations → 组件的 methods
    myIncreaseAge() {
      this.$store.commit('userModule/increaseAge')
    },
    mySetName(name) {
      this.$store.commit('userModule/setName', name)
    },

    // mapMutations
    ...mapMutations('userModule', ['increaseAge', 'setName']),

    // mapMutations 重命名
    ...mapMutations('userModule', {
      increaseAge2: 'increaseAge',
      setName2: 'setName'
    })
  }
}
</script>
